<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFlag"
      class="avue-dialog avue-dialog--top"
      width="60%"
      @close="cancel"
    >
      <div style="margin: 10px 0;margin-right: 70px">
        <el-form ref="ruleForm" :model="dataForm" label-width="100px" class="product-form">
          <el-row>
            <el-col :span="16">
              <el-form-item label="记录状态:" prop="status">
                <el-select v-model="dataForm.status" :disabled="true" size="small" style="width: 100%" placeholder="请选择记录状态">
                  <el-option
                    v-for="item in recordDict"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value * 1">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="处理说明:" prop="remark">
            <vue-editor
              ref="editor"
              :editorOptions="editorOption"
              v-model="dataForm.remark"
              style="width: 99%;"
              :useCustomImageHandler="false"
            ></vue-editor>
          </el-form-item>
        </el-form>
      </div>

      <div style="float: right">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateStatus } from "@/api/warning/warning-record"
import {VueEditor} from "vue2-editor";

export default {
  name: "recordStatus",
  components: {
    VueEditor
  },
  data() {
    return {
      title: '记录处理',
      dialogFlag: false,
      dataForm: {},
      recordDict: [], // 记录状态
      handleUser: "",
      editorOption: {
        modules:{
          toolbar: [
            ['bold', 'italic', 'underline', 'strike', 'color', 'align', 'clean', 'image'],
          ]
        },
        placeholder: "输入内容..."
      }
    }
  },
  mounted() {
    this.recordDict = this.$store.state.dict.dictDatas.record_status
  },
  methods: {
    init(row) {
      this.dialogFlag = true;
      this.dataForm.id = row.id
      this.dataForm.status = 0
    },
    // 确认按钮
    determine() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.dataForm.handleUser = this.$store.state.user.id
          this.dataForm.status = 1;
          updateStatus(this.dataForm).then(res => {
            if (res.code === 0) {
              this.$message.success("操作成功")
              this.cancel()
            }
          })
        }
      })
    },
    cancel() {
      this.dialogFlag = false;
      this.dataForm = {};
      this.$refs['ruleForm'].clearValidate();
      this.$emit('restOnLoad');
    },
  }
}
</script>

<style scoped>
.product-form ::v-deep .el-form-item__label {
  color: #3f4448;
  font-weight: 400;
}

.product-form ::v-deep .el-textarea__inner {
  resize: none;
  min-height: 111.6px !important;
}
</style>
